

function goodsListModule(){
    /**
     * 头部导航栏
    */
    var navmiddle = {
        data: function(){
            return {

            }
        },
        methods: {
            search: function(){
                var oSearch = document.querySelector('.detailed-search'),
                    oSearcDetailed = oSearch.querySelector('.head-search-detailed');
                    addBodyBg(.5)
                    oSearcDetailed.classList.add('lacement-detailed');
            },
            // 购物车
            catPost: function(){
                var d = document,
                    cat = d.querySelector('.cat-module');
                cat.classList.add('cat-module-js');
            }
        },
        template:  `
                <div class="search">
                    <div class="search-input">
                        <a href="javascript:;"><span class="iconfont icon-sousuo"></span></a>
                        <input type="text" placeholder="找你喜欢的商品" @click="search" />
                    </div>
                    <a href="javascript:;"><span class="iconfont icon-gouwuche" @click="catPost"></span></a>
                </div>
                `
    };
    var goodsLIstNav = {
        components: {
            'tem-navmiddle': navmiddle
        },
        methods: {
            personal: function(){
                var body = document.querySelector('body');
                addBodyBg(.4, function(node){
                    //console.log(node)
                    node.addEventListener('click', function(){
                        body.classList.remove('personal-js');
                        remBodyBg();
                        var timer = setTimeout(function(){
                            body.style.transition = 'none';
                            clearTimeout(timer);
                        }, 400);
                    });
                });
                body.style.transition = 'transform .4s';
                body.classList.add('personal-js');
            },
            closesWitchFn: function(){
                var switchNode = document.querySelector('.goods-list-module');
                switchPageFn(false, {
                    node: switchNode,
                    className: 'goods-details-module-js'
                });
            }
        },
        template: `
            <div class="header goods-list-header" id="header">  
                <nav class="header-nav">
                    <div class="head-nav-img"  @click="closesWitchFn">
                        
                    </div>
                    <tem-navmiddle></tem-navmiddle>
                    <!--<div class="head-nav-news"><span class="iconfont icon-xinxi"></span></div>-->
                </nav>
            </div>
                `
    };

   

    /**
     * 商品列表
    */
    var goodsList = {
        props: ['setGoods'],
        data: function(){
            return {
                goodsListNav: ['英雄', '皮肤', '其他', '礼包'],
                goodsIndex: 0,
                goodsList: [
                    {text: {h3: '元素女皇 奇亚娜', span1: '4500', span2: '6300'}, img: './page/images/goods-details/2-235001-.jpg'},
                    {text: {h3: '元素女皇 奇亚娜', span1: '4500', span2: '6300'}, img: './page/images/goods-details/2-235001-.jpg'},
                    {text: {h3: '元素女皇 奇亚娜', span1: '4500', span2: '6300'}, img: './page/images/goods-details/2-235001-.jpg'},
                    {text: {h3: '元素女皇 奇亚娜', span1: '4500', span2: '6300'}, img: './page/images/goods-details/2-235001-.jpg'},
                    {text: {h3: '元素女皇 奇亚娜', span1: '4500', span2: '6300'}, img: './page/images/goods-details/2-235001-.jpg'},
                    {text: {h3: '元素女皇 奇亚娜', span1: '4500', span2: '6300'}, img: './page/images/goods-details/2-235001-.jpg'},
                    {text: {h3: '元素女皇 奇亚娜', span1: '4500', span2: '6300'}, img: './page/images/goods-details/2-235001-.jpg'}
                ],
                imagesName: '',
                goods: []
            }
            
        },
        computed: {
            getGoods: function(){
                //console.log(this.setGoods)
                if(this.setGoods[0]){
                    if(this.setGoods[0].cid == 12) this.imagesName = 'yingxiong';
                    if(this.setGoods[0].cid == 11) this.imagesName = 'pifu';
                }
                if(this.setGoods){
                    this.goods = this.setGoods;
                }
                return this.setGoods;
            }
        },
        methods: {
            /**
             * 商品导航栏切换
            */
            goodsNav: function(index, event){
                var This = this;
                //console.log(index)
                //console.log(event.target)
                This.goodsIndex = index;
                if(index == 0){ // 点击英雄

                    var yingxiong = sessionStorage.getItem('yingxiong');
                    if(yingxiong){
                        yingxiong = JSON.parse(yingxiong);
                        This.$emit('get-goods', yingxiong);
                        return;
                    }  
                    This.reqData({
                        pifu: 12
                    });

                }else if(index == 1){ //点击皮肤
                    var pifu = sessionStorage.getItem('pifu');
                    if(pifu){
                        pifu = JSON.parse(pifu);
                        This.$emit('get-goods', pifu);
                        return;
                    };
                    This.reqData({
                        pifu: 11
                    });
                }
               

            },
            /**
             * 切换页面函数及页面渲染
            */
            entrustGoods: function(e){
                var target = e.target;   
                var d = document;
                var goodsDetailsModule = d.querySelector('.goods-details-module');
                //console.log(target.tagName)
                if(target.tagName == 'LI'){
                    // 页面切换函数
                    switchGoodsDetailsFn(true, {
                        node: goodsDetailsModule,
                        className: 'goods-details-module-js'
                    });
                    // 获取商品编号
                    var identifier = target.getAttribute('identifier');
                    // 传送给其他组件的数据
                    var data = {};
                    var goods = this.goods;
                    goods.forEach(function(item){
                        if(item.identifier == identifier){
                            data = item;
                            return;
                        }
                    });
                    if(data.cid == 12){
                        data.img = './images/yingxiong/'+data.thumb;
                    }else if(data.cid == 11){
                        data.img = './images/pifu/'+data.thumb;
                    }
                    //console.log(data)
                    this.$emit('get-goods-details', data);
                   
                }
            },
            reqData: function(categoryId){
                var This = this;
                var key = Object.keys(categoryId);
                    addLoad(.3);
                    ajax({
                        url: './php/goods.php',
                        data: {
                            category: categoryId[key[0]]
                        },
                        method: 'post',
                        success: function(res){
                            remLoad(.3);
                            var res = JSON.parse(res);
                            
                            if(res.error == 0){
                                return console.error(res);
                            }
                            if(res.error == 1){
                                var data = res.data;
            
                                This.$emit('get-goods', data);
                                sessionStorage.setItem(key[0], JSON.stringify(data));
                                //console.log(dataArr);
                            }
                        }
                    });
            }
        },
        template: `
            <div class="goods-list">
                <div class="goods-list-top">
                    <div class="goods-list-classify">
                        <a href="javascript:;" v-for="(item, index) in goodsListNav" :class="index==goodsIndex?'classify-style-js':''" @click="goodsNav(index, $event)">{{ item }}</a>
                    </div>
                    <div class="goods-list-sort">
                        <a href="javascript:;">排序<span class="iconfont icon-you"></span></a>
                        <a href="javascript:;">分类<span class="iconfont icon-you"></span></a>
                        <a href="javascript:;">过滤<span class="iconfont icon-you"></span></a>
                    </div>
                </div>
                <div class="goods-list-goods">
                    <ul @click="entrustGoods">
                        <li v-for="(item, index) in getGoods" :identifier="item.identifier">
                            <a href="javascript:;">
                                <img :src="'./images/'+ imagesName +'/'+item.thumb">
                                <div class="goods-list-goods-text">
                                    <h3>{{ item.gname }}</h3>
                                    <p><span>22222</span><span>11111</span></p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            `
    };
    



    // 页面整体
    var goodsModule = {
        props: ['setGoods'],
        data: function(){
            return {
                data: 1,
                //getGoodsDetails: {}
                setGoodss: this.setGoods
            }
        },
        components: {
            'tem-goods-list': goodsLIstNav,
            'goods-list': goodsList
        },
        computed: {
            // computedSetGoodss: function(){
            //     return this.setGoods;
            // }
            
        },
        watch: {
            setGoods: function(newVal, oldVal){
                this.setGoodss = newVal;
                //console.log(newVal)
            }
        },
        methods: {
            getGoodsDetails: function(data){
                this.$emit('get-goods-details', data);
            },
            getGoods: function(data){
                this.setGoodss = data;
                //console.log(this.setGoods)
                //console.log(this.setGoodss)
                //this.$emit('get-goods', data);
            }
        },
        template: `
            <div class="goods-list-module">
                <div class="goods-list-scroll">
                    <tem-goods-list></tem-goods-list>
                    <goods-list v-on:get-goods="getGoods" v-on:get-goods-details="getGoodsDetails" v-bind:set-goods="setGoodss"></goods-list>
                </div>
            </div>
                `
    };

    return goodsModule;
}



